import React, { memo,useEffect } from 'react'
import { useDispatch,useSelector } from "react-redux";
import { RecommendRankingWrapper } from "./style";
import { getTopListAction } from "../../store/actionCreator";
import HjThemeHeaderRCM from "@/components/theme-header-rcm/index";
import HjTopRanking from "@/components/top-ranking";

export default memo(function HjRecommendRanking() {

  const dispatch = useDispatch()
 const {upRanking,newRanking,originRanking} = useSelector(state => (
   {
       upRanking:state.getIn(['recommend','upRanking']),
       newRanking:state.getIn(['recommend','newRanking']),
       originRanking:state.getIn(['recommend','originRanking']),
   }
 ))

  useEffect(() => {
    dispatch(getTopListAction(0))
    dispatch(getTopListAction(2))
    dispatch(getTopListAction(3))
  }, [dispatch]);

  return (
    <RecommendRankingWrapper>
      <HjThemeHeaderRCM title="榜单" />
      <div className="top">
        
        <HjTopRanking  info={originRanking}/>
        <HjTopRanking  info={newRanking}/>
        <HjTopRanking  info={upRanking}/>
        
      </div>
    </RecommendRankingWrapper>
  )
})
